Question

每次鼠标悬停时，带有下拉子菜单的菜单项都会展开。下面是它的HTML代码。

<header id="header">
    <div style="width:90%; margin:auto;">
        <div id="logo"><a href="#">Inversion iDeas</a></div>
        <nav id="nav">
            <ul>
                <li><a href="#home" title="Welcome" >Inversion iDeas<br /><span class="desc">welcome</span></a></li>
                <li><a href="#about" title="About Us">Discover<br /><span class="desc">About Us</span></a>
                    <ul>
                        <li><a href="services.php">Our Services</a></li>
                        <li><a href="services.php#CMS">Content Marketing Strategy</a></li>
                        <li><a href="services.php#publishing">Print & Digital Publishing</a></li>
                        <li><a href="services.php#DIM">Direct Interactive Marketing</a></li>
                        <li><a href="services.php#social-media">Social Media Marketing</a></li>
                        <li><a href="services.php#search">Search Marketing</a></li>
                        <li><a href="services.php#video">Video</a></li>
                        <li><a href="services.php#EME">Experiential Marketing Events</a></li>
                        <li><a href="services.php#CMI">Current Media Ideas</a></li>
                        <li><a href="services.php#events">Events</a></li>
                        <li><a href="services.php#web-mobile">Web & Mobile</a></li>
                        <li><a href="services.php#leadership">Leadership</a></li>
                    </ul>
                </li>
                <li><a href="#media" title="Media">Experience<br /><span class="desc">media</span></a></li>
                <li><a href="#clients" title="Satisfied Clients">Testimony<br /><span class="desc">Satisfied Clients</span></a></li>
                <li><a href="#contact-us" title="Contact Us">Reach Us<br /><span class="desc">contact us</span></a></li>
            </ul>
        </nav>
    </div>
</header>

CSS

header {
width: 100%;
background:#000;
opacity:0.8;
height: 80px;
position: fixed;
margin-top: 30px;
z-index:999;
}

#logo a {
color: #fff;
text-decoration: none;
float: left;
font-size: 30px;
margin-top: 20px;
font-family:"century gothic";
font-weight: normal;
height:45px;
width:287px;
text-indent:-9999px;
background:url(../images/logo.png) 0 0 no-repeat;
}

#nav {
width: 800px;
position:fixed;
top:50px;
left:400px;
}

#nav ul{
list-style: none;
display: block;
margin: 0;
padding: 0;
}

#nav li{
float: left;
padding: 10px 20px 0 20px;
border-left:solid 1px #fff;
text-align:center;
height:40px;
display:block;
font-size:12px;
}
#nav li:first-child{
border-left:none;
}
#nav li a {
color: #fff; opacity:0.7; font-size: 16px; text-decoration: none; font-family: Verdana, Geneva, sans-serif;
}
#nav li a.active { color: #94c600; opacity:1;}
#nav li a:hover { color: #94c600; opacity:1; width:100%;}
#nav li ul { display: none;}
#nav li:hover ul {display: block; position: relative; top:8px; left:-20px; width:160px; padding:0;}
#nav li:hover li {float: none; font-size:12px;  background:rgba(0,0,0,0.8); border-left:none; text-align:left; }
#nav li:hover li a {font-size:12px;  padding:0; margin:0;}
#nav li:hover li a:hover {color:#94c600;}

.desc{
font-size:12px;
color:#333;
display: block;
}

Answer 1

父母的

position: relative;。关于孩子的position: absolute;。

JSfiddle（下次发布时请加一个）

Answer 2

我在CSS中添加了一些定位

#nav li ul { display: none; position: relative;}

#nav li:hover ul {display: block; position: absolute; top:48px; left:168px; width:160px; padding:20px 0 0 0;}
#nav li:hover li {float: none; font-size:12px;  background:rgba(0,0,0,0.8); border-left:none; text-align:left;}

看到在这里工作

http://codepen.io/jhawes/pen/lyevj

下拉菜单宽度行为不端

2 个答案: