プルダウンメニューが思った動きをしてくれない

html
1<ul class="nav">
2  <li><a href="#" class="nav-item">あ</a></li>
3  <li><a href="#" class="nav-item">い</a></li>
4  <li><a href="#" class="nav-item">う</a></li>
5  <li><a href="#" class="nav-item">え</a></li>
6  <li><a href="#" class="nav-item hover-item">お</a>
7    <ul>
8      <li><a href="#" class="nav-item">か</a></li>
9      <li><a href="#" class="nav-item">き</a></li>
10      <li><a href="#" class="nav-item">く</a></li>
11    </ul>
12  </li>
13</ul>

sass
1.nav {
2    max-width: 900px;
3    height: 42px;
4    box-sizing: border-box;
5    padding: 0;
6    position: absolute;
7    right: 0;
8    top:23px;
9    @extend %u-clear;
10    >li {
11        width: 100px;
12        height: 42px;
13        text-align: center;
14        float: left;
15        border-right: 2px dotted #e4e3e3;
16        font-size: 12px;
17        font-weight:bold;
18        line-height: 42px;
19        &.last-item {
20            border-right: none;
21        }
22    }
23}
24.nav-item {
25    width: 100%;
26    height: 100%;
27    position: relative;
28    display: inline-block;
29    text-decoration: none;
30}
31.hover-item ul{
32    overflow: hidden;
33    width: 100px;
34    height: 42px;
35    -moz-transition: .2s;
36    -webkit-transition: .2s;
37    -o-transition: .2s;
38    -ms-transition: .2s;
39    transition: .2s;
40    &:hover {
41        height: 168px;
42
43    }
44}

sass
1%u-clear {
2  zoom: 1;
3
4  &:before,
5  &:after {
6    content: "";
7    display: block;
8  }
9
10  &:after {
11    clear: both;
12  }
13}

reset
1/* http://meyerweb.com/eric/tools/css/reset/
2   v2.0 | 20110126
3   License: none (public domain)
4*/
5
6html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
7	margin: 0;
8	padding: 0;
9	border: 0;
10	font-family: $font-jp;
11	font-size: 100%;
12	font: inherit;
13	vertical-align: baseline; }
14
15/* HTML5 display-role reset for older browsers */
16
17article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
18	display: block; }
19
20body {
21	position: relative;
22	line-height: 1; }
23
24ol, ul {
25	list-style: none; }
26
27blockquote, q {
28	quotes: none; }
29
30blockquote {
31	&:before, &:after {
32		content: '';
33		content: none; } }
34
35q {
36	&:before, &:after {
37		content: '';
38		content: none; } }
39
40table {
41	border-collapse: collapse;
42	border-spacing: 0; }

メニューリストがある中で一箇所だけプルダウンにしたいと思っております。
現在、『お』の<a>タグの要素が伸びてしまったり『お』の下に『か』が出ていて『か』をホバーすると
その下の要素が出てくるというあと一歩のところで悩んでおります。

kei344

2017/07/14 01:57

CSSが書かれていません。（SASSではなく出力されたCSSを提示されたほうが回答を得やすいと思います）

n.t

2017/07/14 02:04

記載漏れしていました。申しわけありません　cssは特殊な変換がされているので記載できないのでsassでお願いします。

kei344

2017/07/14 02:09

SASSを使ったことが無いのでわかりませんが、「特殊な変換」がされているならなおさらCSSで書かないと問題の再現が出来ないのでは。

n.t

2017/07/14 02:14

分割されたsassを一列の文字列に変換して難読化しているのでcssに慣れた方でも読むのに時間がかかってしまいます。全部を見られるのはいろいろ問題があるのですいません。

T_sa

2017/07/14 02:27

extendしている %u-clear についても内容の記載をお願いできませんか？

n.t

2017/07/14 02:29

追記いたしました。clearfixをextendしております。

T_sa

2017/07/14 02:57

状況が再現できません。当たっているスタイルはこれで全てでしょうか？リセットなどかけていればそれも明記ください。

行動規範の内容に同意します

回答2件

ベストアンサー

以下のように行ってみてはいかがでしょうか？
HTML

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6</head>
7<body>
8<ul class="nav">
9    <li><a href="#" class="nav-item">あ</a></li>
10    <li><a href="#" class="nav-item">い</a></li>
11    <li><a href="#" class="nav-item">う</a></li>
12    <li><a href="#" class="nav-item">え</a></li>
13    <li>
14        <a href="#" class="nav-item hover-item">お</a>
15        <ul>
16            <li><a href="#" class="nav-item">か</a></li>
17            <li><a href="#" class="nav-item">き</a></li>
18            <li><a href="#" class="nav-item">く</a></li>
19        </ul>
20    </li>
21</ul>
22</body>
23</html>

SCSS

SCSS
1html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
2  border: 0;
3  font: inherit;
4  font-family: sans-serif;
5  font-size: 100%;
6  margin: 0;
7  padding: 0;
8  vertical-align: baseline;
9}
10
11article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
12  display: block;
13}
14
15body {
16  line-height: 1;
17  position: relative;
18}
19
20ol, ul {
21  list-style: none;
22}
23
24blockquote, q {
25  quotes: none;
26}
27
28blockquote {
29  &:before, &:after {
30    content: none;
31  }
32}
33
34q {
35  &:before, &:after {
36    content: none;
37  }
38}
39
40table {
41  border-collapse: collapse;
42  border-spacing: 0;
43}
44
45.nav {
46  @extend %u-clear;
47  box-sizing: border-box;
48  height: 42px;
49  max-width: 900px;
50  padding: 0;
51  position: absolute;
52  right: 0;
53  top: 23px;
54  > li {
55    border-right: 2px dotted #e4e3e3;
56    float: left;
57    font-size: 12px;
58    font-weight: bold;
59    height: 42px;
60    line-height: 42px;
61    text-align: center;
62    width: 100px;
63    &.last-item {
64      border-right: none;
65    }
66  }
67}
68
69.nav-item {
70  display: inline-block;
71  height: 100%;
72  position: relative;
73  text-decoration: none;
74  width: 100%;
75}
76
77.hover-item {
78  & + ul {
79    height: 0;
80    -moz-transition: .2s;
81    -ms-transition: .2s;
82    -o-transition: .2s;
83    overflow: hidden;
84    transition: .2s;
85    -webkit-transition: .2s;
86    width: 100px;
87    &:hover {
88      height: 168px;
89    }
90  }
91  &:hover + ul {
92    height: 168px;
93  }
94}
95
96%u-clear {
97  zoom: 1;
98  &:before, &:after {
99    content: "";
100    display: block;
101  }
102  &:after {
103    clear: both;
104  }
105}

結果

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
8            border: 0;
9            font: inherit;
10            font-family: sans-serif;
11            font-size: 100%;
12            margin: 0;
13            padding: 0;
14            vertical-align: baseline;
15        }
16
17        article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
18            display: block;
19        }
20
21        body {
22            line-height: 1;
23            position: relative;
24        }
25
26        ol, ul {
27            list-style: none;
28        }
29
30        blockquote, q {
31            quotes: none;
32        }
33
34        blockquote:before, blockquote:after {
35            content: none;
36        }
37
38        q:before, q:after {
39            content: none;
40        }
41
42        table {
43            border-collapse: collapse;
44            border-spacing: 0;
45        }
46
47        .nav {
48            box-sizing: border-box;
49            height: 42px;
50            max-width: 900px;
51            padding: 0;
52            position: absolute;
53            right: 0;
54            top: 23px;
55        }
56
57        .nav > li {
58            border-right: 2px dotted #e4e3e3;
59            float: left;
60            font-size: 12px;
61            font-weight: bold;
62            height: 42px;
63            line-height: 42px;
64            text-align: center;
65            width: 100px;
66        }
67
68        .nav > li.last-item {
69            border-right: none;
70        }
71
72        .nav-item {
73            display: inline-block;
74            height: 100%;
75            position: relative;
76            text-decoration: none;
77            width: 100%;
78        }
79
80        .hover-item + ul {
81            height: 0;
82            -moz-transition: .2s;
83            -ms-transition: .2s;
84            -o-transition: .2s;
85            overflow: hidden;
86            transition: .2s;
87            -webkit-transition: .2s;
88            width: 100px;
89        }
90
91        .hover-item + ul:hover {
92            height: 168px;
93        }
94
95        .hover-item:hover + ul {
96            height: 168px;
97        }
98
99        .nav {
100            zoom: 1;
101        }
102
103        .nav:before, .nav:after {
104            content: "";
105            display: block;
106        }
107
108        .nav:after {
109            clear: both;
110        }
111    </style>
112</head>
113<body>
114<ul class="nav">
115    <li><a href="#" class="nav-item">あ</a></li>
116    <li><a href="#" class="nav-item">い</a></li>
117    <li><a href="#" class="nav-item">う</a></li>
118    <li><a href="#" class="nav-item">え</a></li>
119    <li>
120        <a href="#" class="nav-item hover-item">お</a>
121        <ul>
122            <li><a href="#" class="nav-item">か</a></li>
123            <li><a href="#" class="nav-item">き</a></li>
124            <li><a href="#" class="nav-item">く</a></li>
125        </ul>
126    </li>
127</ul>
128</body>
129</html>