Question

有点令人沮丧，因为我很难做这件事。我不知道如何解决这个问题。在我的关于按钮上应该有一个“asdas”和另一个子菜单。只有悬停在链接上时才会出现。 Here is the sample pic of that

CSS

.mainNavWrapper{
  position: absolute;
  width: 100%;
  height: 290px;
  background: rgba(0,0,0,0.7);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#46000000', endColorstr='#46000000');
  bottom: 195px;
  text-align: center; }


.ie8 .mainNavWrapper{
 min-width: 1000px;
 filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#60000000', endColorstr='#60000000');}

.mainnav form{
 display:none;}

.mainnav form select{
 padding: 5px 10px 5px 10px;
 margin-top: 55px;}


 .mainnav ul{
  position: relative;
  margin: 0 auto;
  margin-top: 59px;
  margin-bottom: 43px;
  z-index:1; }

 .mainnav ul li{
  display: inline;
  font-size: 22px;
  margin-left: 17px;
  font-family: 'Oswald', sans-serif;}

 .mainnav ul li:first-child{
  margin-left: 0;}

 .mainnav a, .mainnav a:visited{
 color: #fff;}

.mainnav a:hover, .mainnav a.selected { 
text-decoration: none;}

HTML

<nav class="mainnav" data-smallmenubgcolour="#777">
                     <ul>
                      <li><a href="#home">HOME</a></li>
                      <li><a href="#about">ABOUT</a>
                      <ul>
                          <li>ABOUT1</li>
                          <li>ABOUT2</li>
                          </ul>
                      </li>
                      <li><a href="#credo">CREDO</a></li>
                      <li><a href="#philosophy">PHILOSOPHY</a></li>
                      <li><a href="#portfolio">PORTFOLIO</a></li>
                      <li><a href="#services">SERVICES</a></li>
                      <li><a href="#news">NEWS</a></li>
                      <li><a href="#contact">CONTACT</a></li>
                     </ul>
</nav

Answer 1

你能看看这个

吗？

<强> HTML

<ul class="nav">
    <li>Home</li>
    <li>About
        <ul class="subnav">
            <li>Sublink 1</li>
            <li>Sublink 2</li>
        </ul>
    </li>
</ul>

<强>的CSS

ul, li {
    margin:0;
    padding:0;
    vertical-align:top;
}
.nav li, .subnav li {
    display:inline-block;
    vertical-align:top;
    cursor:pointer;
}
.nav li {
    position:relative;
}
.subnav {
}
.subnav {
    display:none;
    position:absolute;
    left:0;
    top:20px;
}
.subnav {
    white-space:nowrap;
}

<强>脚本

$(".nav li").on("mouseover", function () {
    $(this).find(".subnav").show();
})
$(".nav li").on("mouseout", function () {
    $(this).find(".subnav").hide();
})

Fiddle Demo

Answer 2

大家好，您可以根据需要将自定义CSS更改应用到jsfiddle，这可能会对您有所帮助。

＆＃13;

.nav ul {
  list-style: none;
  background-color: #444;
  text-align: center;
  padding: 0;
  margin: 0;
}

.nav li {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  text-align: left;
}

.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  padding-left: 15px;
  border-bottom: 1px solid #888;
  transition: .3s background-color;
}

.nav a:hover {
  background-color: #005f5f;
}

.nav a.active {
  background-color: #aaa;
  color: #444;
  cursor: default;
}

/* Sub Menus */
.nav li li {
  font-size: .8em;
}

/*******************************************
   Style menu for larger screens

   Using 650px (130px each * 5 items), but ems
   or other values could be used depending on other factors
********************************************/

@media screen and (min-width: 650px) {
  .nav li {
    width: 130px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
    display: inline-block;
    margin-right: -4px;
  }

  .nav a {
    border-bottom: none;
  }

  .nav > ul > li {
    text-align: center;
  }

  .nav > ul > li > a {
    padding-left: 0;
  }

  /* Sub Menus */
  .nav li ul {
    position: absolute;
    display: none;
    width: inherit;
  }

  .nav li:hover ul {
    display: block;
  }

  .nav li ul li {
    display: block;
  }
}

＆＃13;

<div class="nav">
     <ul>
         <li><a href="#home">HOME</a></li>
         <li><a href="#about">ABOUT</a>
             <ul>
                 <li>ABOUT1</li>
                 <li>ABOUT2</li>
             </ul>
         </li>
         <li><a href="#credo">CREDO</a></li>
         <li><a href="#philosophy">PHILOSOPHY</a></li>
         <li><a href="#portfolio">PORTFOLIO</a></li>
         <li><a href="#services">SERVICES</a></li>
         <li><a href="#news">NEWS</a></li>
         <li><a href="#contact">CONTACT</a></li>
    </ul>
</div>

＆＃13;

Apply custom your CSS changes to these

Answer 3

我不得不修改一些颜色，以便能看到我在做什么。希望我没有把它弄得太乱了！我相信这就是你想要的。约的子菜单错过了它的css和“a href”。我希望这能为您解决问题！

.mainNavWrapper {
  position: absolute;
  width: 100%;
  height: 290px;
  background: rgba(0, 0, 0, 0.7);
  filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#46000000', endColorstr='#46000000');
  text-align: center;
}
.ie8 .mainNavWrapper {
  min-width: 1000px;
  filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#60000000', endColorstr='#60000000');
}
.mainnav ul {
  list-style: none;
  background-color: #444;
  text-align: center;
  padding: 0;
  margin: 0;
}
.mainnav li {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  text-align: left;
}
.mainnav a {
  text-decoration: none;
  color: #fff;
  display: block;
  padding-left: 15px;
  border-bottom: 1px solid #888;
  transition: .3s background-color;
}
.mainnav ul li:first-child {
  margin-left: 0;
}
.mainnav a,
.mainnav a:visited {
  color: #fff;
}
.mainnav a:hover,
.mainnav a.selected {
  text-decoration: none;
}
body {
  margin: 0;
  padding: 0;
  background: #7c7c7c;
}
.mainnav li li {
  font-size: .8em;
}
.mainnav li ul {
  position: absolute;
  display: none;
  width: inherit;
}
.mainnav li:hover ul {
  display: block;
}
.mainnav li ul li {
  display: block;
}
.mainnav li {
  border-bottom: none;
  height: 50px;
  line-height: 50px;
  font-size: 1.4em;
  display: inline-block;
  margin-right: -4px;
}

<body>
  <header>
    <div class="mainNavWrapper">
      <div class="mainnav">
        <ul>
          <li class="home"><a href="#">HOME</a>
          </li>
          <li class="About"><a href="#">ABOUT</a>
            <ul>
              <li><a href="#">About1</a>
              </li>
              <li><a href="#">About2</a>
              </li>
            </ul>
          </li>
          <li class="credo"><a href="#">CREDO</a>
          </li>
          <li class="philosophy"><a href="#">PHILOSOPHY</a>
          </li>
          <li class="portfolio"><a href="#">PORTFOLIO</a>
          </li>
          <li class="services"><a href="#">SERVICES</a>
          </li>
          <li class="news"><a href="#">NEWS</a>
          </li>
          <li class="contact"><a href="#">CONTACT</a>
          </li>
        </ul>
      </div>
    </div>
  </header>
</body>

如何在导航栏上修复此子菜单？

3 个答案: