Question

my web上线后我遇到了问题。我正在使用WebStorm，在localhost检查期间一切正常，所有元素都处于同一级别。

在菜单栏中，照片部分向下移动。

我有一个dropdown.ccs文件来格式化下拉列表。

可能是什么问题？

＆＃13;

#top {
    width: 650px;
    height: 120px;
    margin: 0 auto 30px auto;
    /*background-color: #e7e7e7;*/
}

#menu-bar {
    position: relative;
    float: right;
    left: -50%;
}

#menu-bar ul {
    list-style: none;
    position: relative;
    left: 50%;
    margin-top: 10px;
}

#menu-bar li {
    float: left;
    position: relative;
    margin-right: 55px;
}

#menu-bar a {
    color: #8c8c8c;
    font-size: 12pt;
    font-family: "Segoe UI", "Arial", "Courier New";
    text-decoration: none;
}

#selected {
    color: #000000;
}

#selected > a {
    color: #000000;
}

#menu-bar a:hover {
    color: #222222;
    text-decoration: none;
}

#images {
    width: 533px;
    height: 800px;
    margin: 0 auto 30px auto;
    position: relative;
    /*background-color: #afd9ee;*/
}

/* Dropdown Button */
.dropbtn {
    cursor: pointer;
    color: #8c8c8c;
    font-size: 12pt;
    font-family: "Segoe UI", "Arial", "Courier New";
    text-decoration: none;
    margin-bottom: 5px;
    /*background: #dddddd;*/
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    min-width: 160px;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: 8c8c8c;
    text-decoration: none;
    display: block;
    font-size: 10pt !important;
    margin-bottom: 2px;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    color: #000000;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    color: #565656;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/custom.css">
    <link rel="stylesheet" type="text/css" href="css/dropdown.css">
    <link rel="stylesheet" type="text/css" href="css/crossfade.css">
    <link rel="stylesheet" href="src/css/bootstrap.min.css"/>
    <title>Feanor Studio</title>
</head>
<body>
    <div id="top">
        <div id="menu-bar">
            <ul>
                <li id="selected"><a href="#">Home</a></li>
                <li class="dropdown">
                    <p class="dropbtn">Photo</p>
                    <div class="dropdown-content">
                        <a href="http://feanor.cz/portfolio/fashion-photo">Fashion portraits</a>
                        <a href="http://feanor.cz/portfolio/art-photo">Art portraits</a>
                        <a href="http://feanor.cz/portfolio/car-photo">Car photography</a>
                        <a href="http://feanor.cz/portfolio/product-photo">Product photography</a>
                        <a href="http://feanor.cz/portfolio/interior-photo">Interior photography</a>
                    </div>
                </li>
                <li><a href="#">Paintings</a></li>
                <li><a href="http://feanor.cz/contacts/">Contact</a></li>
                <li><a href="http://feanor.cz/about/">About Us</a></li>
            </ul>
        </div>
    </div>
    <div id="images">
        <div id="crossfade">
            <img class="bottom img-responsive" src="images/main/1.jpg" alt="Image 1">
            <img class="top img-responsive" src="images/main/2.jpg" alt="Image 2">
            <img class="top img-responsive" src="images/main/3.jpg" alt="Image 3">
            <img class="top img-responsive" src="images/main/4.jpg" alt="Image 4">
            <img class="top img-responsive" src="images/main/5.jpg" alt="Image 5">
        </div>
    </div>
</body>
</html>

＆＃13;

Answer 1

从下拉列表中移除<p></p>代码并使用<a>代码：

<li class="dropdown">
   <a href="#">Photo</a>
  <div class="dropdown-content">
   <a href="http://feanor.cz/portfolio/fashion-photo">Fashion portraits</a>
   <a href="http://feanor.cz/portfolio/art-photo">Art portraits</a>
   <a href="http://feanor.cz/portfolio/car-photo">Car photography</a>
   <a href="http://feanor.cz/portfolio/product-photo">Product photography</a>
   <a href="http://feanor.cz/portfolio/interior-photo">Interior photography</a>
 </div>
</li>

#top {
    width: 650px;
    height: 120px;
    margin: 0 auto 30px auto;
    /*background-color: #e7e7e7;*/
}

#menu-bar {
    position: relative;
    float: right;
    left: -50%;
}

#menu-bar ul {
    list-style: none;
    position: relative;
    left: 50%;
    margin-top: 10px;
}

#menu-bar li {
    float: left;
    position: relative;
    margin-right: 55px;
}

#menu-bar a {
    color: #8c8c8c;
    font-size: 12pt;
    font-family: "Segoe UI", "Arial", "Courier New";
    text-decoration: none;
}

#selected {
    color: #000000;
}

#selected > a {
    color: #000000;
}

#menu-bar a:hover {
    color: #222222;
    text-decoration: none;
}

#images {
    width: 533px;
    height: 800px;
    margin: 0 auto 30px auto;
    position: relative;
    /*background-color: #afd9ee;*/
}

/* Dropdown Button */
.dropbtn {
    cursor: pointer;
    color: #8c8c8c;
    font-size: 12pt;
    font-family: "Segoe UI", "Arial", "Courier New";
    text-decoration: none;
    margin-bottom: 5px;
    /*background: #dddddd;*/
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    min-width: 160px;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: 8c8c8c;
    text-decoration: none;
    display: block;
    font-size: 10pt !important;
    margin-bottom: 2px;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    color: #000000;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    color: #565656;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/custom.css">
    <link rel="stylesheet" type="text/css" href="css/dropdown.css">
    <link rel="stylesheet" type="text/css" href="css/crossfade.css">
    <link rel="stylesheet" href="src/css/bootstrap.min.css"/>
    <title>Feanor Studio</title>
</head>
<body>
    <div id="top">
        <div id="menu-bar">
            <ul>
                <li id="selected"><a href="#">Home</a></li>
                <li class="dropdown">
                    <a href="#">Photo</a>
                    <div class="dropdown-content">
                        <a href="http://feanor.cz/portfolio/fashion-photo">Fashion portraits</a>
                        <a href="http://feanor.cz/portfolio/art-photo">Art portraits</a>
                        <a href="http://feanor.cz/portfolio/car-photo">Car photography</a>
                        <a href="http://feanor.cz/portfolio/product-photo">Product photography</a>
                        <a href="http://feanor.cz/portfolio/interior-photo">Interior photography</a>
                    </div>
                </li>
                <li><a href="#">Paintings</a></li>
                <li><a href="http://feanor.cz/contacts/">Contact</a></li>
                <li><a href="http://feanor.cz/about/">About Us</a></li>
            </ul>
        </div>
    </div>
    <div id="images">
        <div id="crossfade">
            <img class="bottom img-responsive" src="images/main/1.jpg" alt="Image 1">
            <img class="top img-responsive" src="images/main/2.jpg" alt="Image 2">
            <img class="top img-responsive" src="images/main/3.jpg" alt="Image 3">
            <img class="top img-responsive" src="images/main/4.jpg" alt="Image 4">
            <img class="top img-responsive" src="images/main/5.jpg" alt="Image 5">
        </div>
    </div>
</body>
</html>

不同的web看起来在localhost视图和实时版本

1 个答案: