Question

我目前有一个HTML模板，我正在尝试在悬停菜单上添加一个下拉菜单（模板没有附带）。我知道我必须改变CSS，HTML是正确的。

基本上我想让用户将鼠标悬停在＆＃34;预告片＆＃34;部分并在其下有3个子菜单项，他们可以选择他们想要看的那种预告片。

HTML代码：

<nav>
 <div id="menubar">
    <ul id="nav">
      <li class="current"><a href="index.html">About Us</a></li>
      <li><a href="services.html">Services</a></li>
      <li><a href="sales.html">Sales</a></li>
      <li><a href="trailers.html">Trailers</a><ul>
        <li><a href="#">Custom Trailers</a></li>
        <li><a href="#">Customized Trailers</a></li>
        <li><a href="#">Base Trailers</a></li>
      </ul></li>
      <li><a href="contact.html">Contact Us</a></li>

    </ul>
  </div><!--close menubar-->    
</nav>

这是CSS：

#nav {
margin: 0;
padding: 0;
} 

ul#nav
{ margin:0;}


ul#nav li
{ padding: 0 0 0 0px;
  list-style: none;
  margin: 2px 0 0 0;
  display: inline;

  background: transparent;
    }

ul#nav li a
{ float: left;
  font: bold 120% Arial, Helvetica, sans-serif;
  height: 24px;
  margin: 10px 0 0 20px;
  text-shadow: 1px 1px #000;
  padding: 6px 20px 0 20px;
  background: transparent; 
  border-radius: 7px 7px 7px 7px;
  -moz-border-radius: 7px 7px 7px 7px;
  -webkit-border: 7px 7px 7px 7px;
  text-align: center;
  color: #FFF;
  text-decoration: none;} 

ul#nav li.current a
{ color: #000; 
  text-shadow: none;}

ul#nav li:hover a
{ color: #000;
  text-shadow: none;}

我已经尝试过我在网上找到的方法，但是当前＆＃34; hover＆＃34;当我添加它时，CSS正在与我联系。当我从其他网站获取代码时，我非常迷失并且不知道从哪里开始或在哪里放什么。任何帮助，将不胜感激！我知道这可能是我看不到的简单事情，但是我已经有一段时间了，因为我已经完成了这种类型的CSS。

谢谢！

Answer 1

试试这个：

略微修改的HTML，因此您可以使用带有％宽度的内联块作为导航标题：

<nav>
 <div id="menubar">
    <ul id="nav">
      <li class="current"><a href="index.html">About Us</a></li><!--
      --><li><a href="services.html">Services</a></li><!--
      --><li><a href="sales.html">Sales</a></li><!--
      --><li class="dropdown">
          <a href="trailers.html">Trailers</a>
          <ul>
            <li><a href="#">Custom Trailers</a></li>
            <li><a href="#">Customized Trailers</a></li>
            <li><a href="#">Base Trailers</a></li>
          </ul>
        </li><!--
      --><li><a href="contact.html">Contact Us</a></li>

    </ul>
  </div><!--close menubar-->    
</nav>  

<div id="restofpage">

</div>

CSS：

#nav {
    margin: 0;
    padding: 0;
} 

ul#nav { 
    margin:0;
}

ul#nav > li {
    width:20%;
}

ul#nav li { 
    padding: 0 0 0 0px;
    list-style: none;
    margin: 2px 0 0 0;
    display: inline-block;  
    vertical-align:top;
    background: transparent;
}

ul#nav li a { 
    font: bold 120% Arial, Helvetica, sans-serif;
    height: 24px;
    text-shadow: 1px 1px #000;
    padding: 6px 20px 0 20px;
    background: transparent; 
    border-radius: 7px 7px 7px 7px;
    -moz-border-radius: 7px 7px 7px 7px;
    -webkit-border: 7px 7px 7px 7px;
    text-align: center;
    color: #FFF;
    text-decoration: none;
} 

ul#nav li.current a { 
    color: #000; 
    text-shadow: none;
}

ul#nav li:hover a { 
    color: #000;
    text-shadow: none;
}

#nav ul {
    display:none;
}

#nav li.dropdown:hover ul{
    display:block;
    margin:0;
    padding:0;
    height:0;
    overflow:visible;
}

#nav li.dropdown ul li{
    margin:0;
    display:block;
    word-wrap:none;
    white-space:nowrap;
}

#restofpage{
    background:#369;
    height:500px;
    width:100%;
}

小提琴：http://jsfiddle.net/UUEx8/

这只是将显示从“无”切换到“阻止”，但你可以使用一些奇特的css过渡（在不透明度，变换，位置等）来获得一些光滑的效果。

下拉列表中没有背景，风格远离！

Answer 2

您的问题不明确....要添加CSS下拉菜单，请参阅此内容 How to make a pure css based dropdown menu?

将悬停添加到当前导航栏

2 个答案: