Question

我尝试的一切似乎都不起作用。我尝试操作样式表，我知道有太多，但我只是在修改前搞乱它。我只是需要帮助才能让中间的navmenu。

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8" />

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="path/to/your/jquery/script.js"></script>

    <div id="header">
    <a href="google.com">
    <h1 align="center"><ul><a href="#" class="navLink">EXAMPLE</a></ul></h1>

    <style>h1 {
        color: red;
        font-size: 5em;
        text-decoration: underline;
    }</style>




    </div>


    <style>h1 {
        a:hover{color:#ffffff;}
        color: black;
        font-size: 3em;
        text-decoration: none;

    }</style>

    <style>

    <style>
    <!-- Use this for future backgrounds (optimum resolution: 1448 - 697) --> 
    body
    {
    background:url("");
    background-size:0px 0px;
    background-repeat:no-repeat;
    padding-top:0px;

    <!-- Use this for future backgrounds (optimum resolution: 1448 - 697) -->


    }
    <!--
     a:hover{color:none;}
    -->
        .navLink {
        color: #000000;    
        text-decoration: none !important;}
    ul
    {
    list-style-type:none;
    font-size: 85%;
    font-family: 'Ubuntu Condensed', sans-serif;
    font-weight: lighter;
    font-style: regular;}
    {
    display:inline;
    }
    </style>

    <head>

        <link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css'>


        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
        <title>jQuery suckerFish</title>
        <link rel="stylesheet" type="text/css" href="style.css" media="all">
        <link rel="stylesheet" type="text/css" href="star-light/star-light.css" media="all">
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
          $(document).ready(function(){
                $("#nav-one li").hover(
                    function(){ $("ul", this).fadeIn("fast"); }, 
                    function() { } 
                );
            if (document.all) {
                    $("#nav-one li").hoverClass ("sfHover");
                }
          });

            $.fn.hoverClass = function(c) {
                return this.each(function(){
                    $(this).hover( 
                        function() { $(this).addClass(c);  },
                        function() { $(this).removeClass(c); }
                    );
                });
            };    
        </script>
        <style type="text/css">

    /* Navigation */
    .nav, .nav ul { 
        list-style: none;
        margin: 0 auto;
        padding: 0;
        width:1000; margin:0 auto;
    }

    .nav {
      font-family: 'Ubuntu Condensed', sans-serif;
      z-index: 100;
      position: relative;
    }
    .nav li {
      border-left: 0px solid #000;
      float: left;
      margin: 0;
      padding: 0;
      position: relative;
    }
    .nav li a, .nav li a:link, .nav li a:active, .nav li a:visited {
      font: 1.22em/25px 'Ubuntu Condensed', sans-serif;
      background:   #FFFFFF;
      color: #000000;
      display: block;
      padding: 0 20px;
      text-transform: Uppercase;
      text-decoration: none;
    }

    .nav li a:hover {
      background: #ccc;
      color: #000;  

    }
    #nav-one li:hover a, 
    #nav-one li.sfHover a {
      background: #ccc;
      color: #000;
    }
    #nav-one li:hover ul a, 
    #nav-one li.sfHover ul a {
      background: #FFFFFF;
      color: #000000;   
    }
    #nav-one li:hover ul a:hover, 
    #nav-one li.sfHover ul a:hover {
      background: #ccc;
      color: #000;  
    }

    .nav ul {
      background:   #FFFFFF;
      border-bottom: 0px solid #000;
      list-style: none;
      margin: 0;
      width: 100px;
      position: absolute;
      top: -999em;
      left: -1px;
    }
    .nav li:hover ul,
    .nav li.sfHover ul {
      top: 25px;
    }
    .nav ul li {
      border: 0;
      float: none;
    }
    .nav ul a {
      border: 0px solid #000;
      border-bottom: 0;
      padding-right: 20px;
      width: 80px;
      white-space: nowrap;
    }
    .nav ul a:hover {
      background:   #FFFFFF;
      color: #000;
    }






        </style>
    </head>



    </head>
    <body>




    <HR COLOR="#C0C0C0" WIDTH="100%" HEIGHT="1%">


    <ul id="nav-one" class="nav">


                <li>

                    <a href="#item1">MEN'S</a>
                    <ul style="opacity: 0.9999; display: block;">
                        <li><a href="#item1.1">Tees</a></li>
                        <li><a href="#item1.2">Bottoms</a></li>
                        <li><a href="#item1.3">Fleece</a></li>
                        <li><a href="#item1.4">Shoes</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#item2">WOMEN'S</a>
                    <ul style="opacity: 0.9999; display: none;">
                        <li><a href="#item1.1">Tops</a></li>
                        <li><a href="#item1.2">Denim</a></li>
                        <li><a href="#item1.3">Fleece</a></li>
                        <li><a href="#item1.4">Accesories</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#item3">NEW ARRIVALS</a>
                    <ul style="opacity: 0.9999; display: block;">
                        <li><a href="#item3.1">MEN'S</a></li>
                        <li><a href="#item3.2">WOMEN'S</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#item4">BLOG</a>
                    <ul style="opacity: 0.9999; display: block;">
                        <li><a href="#item4.1">item 4.1</a></li>
                        <li><a href="#item4.2">item 4.2</a></li>
                        <li><a href="#item4.3">item 4.3</a></li>
                    </ul>

            </ul>

            <ul id="nav-two" class="nav">
            </li>
                    <li>
                    <a href="#item4">SALE</a>
                    <ul style="color: #FF0000;">

                    </ul>
                </li>
        </ul>


    <img border="0" src="http://az61389.vo.msecnd.net/6/_ui/img/mosaic/big-transparent-block.png" alt="Vealed" width="0" height="0 1">


    <HR COLOR="#C0C0C0" WIDTH="100%">

    <ul id="nav" >
    <img border="0" src="http://az61389.vo.msecnd.net/6/_ui/img/mosaic/big-transparent-block.png" alt="Vealed" width="" height="2">

    <p><p align="center"><img border="0" src="" alt="" width="800" height="500">


    <img border="0" src="http://az61389.vo.msecnd.net/6/_ui/img/mosaic/big-transparent-block.png" alt="Vealed" width="0" height="2">

    </ul>







    <img border="0" src="http://az61389.vo.msecnd.net/6/_ui/img/mosaic/big-transparent-block.png" alt="Vealed" width="100" height="200"


    <ul id="nav-one" class="nav">
        <img border="0" src="http://az61389.vo.msecnd.net/6/_ui/img/mosaic/big-transparent-block.png" alt="Vealed" width="40" height="0 1">
    <li><a href="#item1.1">Terms and Contditions</a></li>
    </ul>
    </body>
    </html>

我的意思是html btw的这一部分。

<li>

                        <a href="#item1">MEN'S</a>
                        <ul style="opacity: 0.9999; display: block;">
                            <li><a href="#item1.1">Tees</a></li>
                            <li><a href="#item1.2">Bottoms</a></li>
                            <li><a href="#item1.3">Fleece</a></li>
                            <li><a href="#item1.4">Shoes</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#item2">WOMEN'S</a>
                        <ul style="opacity: 0.9999; display: none;">
                            <li><a href="#item1.1">Tops</a></li>
                            <li><a href="#item1.2">Denim</a></li>
                            <li><a href="#item1.3">Fleece</a></li>
                            <li><a href="#item1.4">Accesories</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#item3">NEW ARRIVALS</a>
                        <ul style="opacity: 0.9999; display: block;">
                            <li><a href="#item3.1">MEN'S</a></li>
                            <li><a href="#item3.2">WOMEN'S</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#item4">BLOG</a>
                        <ul style="opacity: 0.9999; display: block;">
                            <li><a href="#item4.1">item 4.1</a></li>
                            <li><a href="#item4.2">item 4.2</a></li>
                            <li><a href="#item4.3">item 4.3</a></li>
                        </ul>

                </ul>

                <ul id="nav-two" class="nav">
                </li>
                        <li>
                        <a href="#item4">SALE</a>
                        <ul style="color: #FF0000;">

                        </ul>
                    </li>
            </ul>

Answer 1

Working Demo

首先，将<ul>设置为“中心”。

<ul class='center' style="opacity: 0.9999; display: block;">

同样，您可以为其他菜单项（女性，新来港定居人士等）设置class="center" 然后添加以下CSS：

.center{
    text-align: center;
}

Answer 2

我建议你将ul“nav-one”和“nav-two”放在一个div中，然后将margin : 0 auto赋予该div（还有其他css样式，如高度，宽度等）。 />
并且“销售”不需要单独的ul，你应该将所有菜单保存在一个ul。

<div id="top-menu">
     <ul class="nav">
          <li>..</li>
          <li>..</li> 
          <li>..</li>
          <li>..</li>              
     </ul>
</div>

css：

#top-menu : {margin : 0 auto; height : auto; width : 920px}

希望我帮助过你。

如何在此HTML标记中将navmenu与中心对齐？

2 个答案: