Question

我知道这个问题可能在一百万次之前被问过，但我似乎无法找到符合我的确切情况或代码的答案或解决方案。（如果有，请链接我！）

我只是想在水平导航上创建一个简单的下拉菜单，其中徽标图像以两侧的链接为中心。我确实安装了bootstrap，但我似乎无法找到一种使用它们的框架对它进行编码的简单方法，所以我说要搞砸它并从头开始构建它。

它不一定必须是直接的html / css，但我并不是非常熟悉js（仍然在学习）。

这是我目前的代码：

＆＃13;

#header {
    height: 40px;
    position: relative;
    margin: 80px auto 0;
}

#header ul {
    margin: 0 auto;
    width: 800px;
    padding: 0;
    list-style: none;
}

#header ul li {
    float: left;
    width: 97px;
}

#header ul li:nth-of-type(4) {
    margin-left: 217px;
}

#header ul li a {
    text-transform: lowercase;
    text-decoration: none;
    display: block;
    text-align: center;
    padding: 12px 0 0 0;
    height: 28px;
    color: #000;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
}

#header ul li a:hover {
    color: #c4c4c4;
}

.logo {
    position: absolute;
    left: 50%;
    margin: -60px 0 0 -124px;
}

@media screen and (max-width: 800px) {
  .logo {
    bottom: 100%;
  }

  #header ul li:nth-of-type(4) {
    margin-left: 0;
  }
  
  #header ul {
    width: 600px;
    position: relative;
  }
}

＆＃13;

<div id="header">
        <a class="logo"><img src="http://www.susanhudsonphotography.com/blog/wp-content/uploads/p4/images/logo_1368744984.jpg" alt="Whatever Photography" height="140" width="230" /></a>
        <ul>
            <li><a href="">About</a></li>
            <li><a href="">Galleries <span class="caret"></span></a></li>
                <ul class="sub-menu"> <!--if you comment out the sub-menu, you'll see the navigation as I want it to look-->
                    <li><a href="">Portraits</a></li>
                    <li><a href="">Landscapes</a></li>
                    <li><a href="">Personal</a></li>
                </ul>
            <li><a href="">Blog</a></li>
            <li><a href="">Info/Rates</a></li>
            <li><a href="">Prints</a></li>
            <li><a href="">Contact</a></li>
        </ul>
    </div>

＆＃13;

我遇到的另一个问题是，当我将视口大小调整为移动尺寸时，徽标图像移动到导航链接的顶部，其中一半隐藏在视野之外。虽然这是一个完全独立的问题......

如何创建一个下拉菜单而不会弄乱其余的代码....？

0 个答案: