页面底部的页脚，并在鼠标悬停在下拉菜单上时停止移动文本

时间：2018-01-07 18:58:33

标签： css

当我没有足够的内容时，我正试图让页脚始终显示在页面底部。我尝试了几种解决方案，但没有一种方法有效。此外，下拉菜单还有一个小问题 - 当我将鼠标悬停在此组件上时，文本会移动。我应该在CSS中更改什么？谢谢！

$(document).ready(function(){
$('li').hover(function(){
$(this).find('ul>li').stop().slideToggle(250);
});
});
body {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 18px;
    color: #333;
}

p {
    padding: 10px;
}

#navigation ul {
	margin: 0;
	padding: 0;
	width: auto;
	list-style-type: none;
	text-align: center;
	display: inline-block;
}

#navigation {
	text-align: center;
}

#navigation ul li {
	float: left;
	font-weight: bold;
	font-size: 20px;
	line-height: 40px;
	text-align: center;
	text-shadow: 1px 1px 1px #000;
	width: 140px;
}

#navigation ul li:hover {
	background: #9D9FA4;
	border-radius: 10px;
}

ul li a {
	text-decoration: none;
	color: #FFFFFF;
}

ul li li {
	background: #3F61A9;
	color: #fff;
	display: none;
}

ul li li:hover {
	background: #9D9FA4;
}

ul li li a{
	text-decoration: none;
	color: #fff;
}


#wrapper {
    margin: 0 auto;
    width: 1000px;
}

#headerwrap {
    width: 1000px;
    float: left;
    margin: 0 auto;
	position: relative; 
}

#header {
    height: 125px;
    background: #000000;
    border-radius: 10px;
    border: 1px solid #000000;
    margin: 5px;
	position: relative;
}

#navigationwrap {
    width: 1000px;
    float: left;
    margin: 0 auto;
	position: relative;
}

#navigation {
    height: 40px;
    background: #52bf6e;
    border-radius: 10px;
    border: 1px solid #3ea858;
    margin: 5px;
}

#contentwrap {
    width: 700px;
    float: left;
    margin: 0 auto;
}

#content {
    background: #FFFFFF;
    border-radius: 10px;
    margin: 5px;
}

#leftcolumnwrap {
    width: 150px;
    float: left;
    margin: 0 auto;
}

#leftcolumn {
    border-radius: 10px;
    margin: 5px;
}

#rightcolumnwrap {
    width: 150px;
    float: left;
    margin: 0 auto;
}

#rightcolumn {
    border-radius: 10px;
    margin: 5px;
}

#footerwrap {
    width: 1000px;
    float: left;
    margin: 0 auto;
    clear: both;
}

#footer {
    height: 40px;
    background: #9D9FA4;
    border-radius: 10px;
    border: 1px solid #888a91;
    margin: 5px;
	background-color: #9D9FA4;
	text-align: center;
	color: #FFFFFF;
	font-weight: bold;
}

#navigationwrap_placeholder {
    display:none;
	height: 40px;
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
    <div id="wrapper">
        <div id="headerwrap">
        <div id="header">
        </div>
        </div>
        <div id="navigationwrap">
        <div id="navigation">
			<ul>
			<li><a href="">main menu</a></li>
			<li><a>test</a>
			<ul class="sub-menu">
				<li><a href="">test1</a></li>
				<li><a href="">test2</a></li>
				<li><a href="">test3</a></li>
				<li><a href="">test4</a></li>
			</ul>
			</li>
			</ul>
        </div>
        </div>
		<div id="navigationwrap_placeholder"></div>
        <div id="leftcolumnwrap">
        <div id="leftcolumn">
            <p></p>
        </div>
        </div>
        <div id="contentwrap">
        <div id="content">
			<br><br>
<p>Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. </p>
			<br><br>
		</div>
        </div>
        <div id="rightcolumnwrap">
        <div id="rightcolumn">
            <p></p>
        </div>
        </div>
        <div id="footerwrap">
        <div id="footer">
        </div>
        </div>
    </div>
</body>
</html>

2 个答案:

答案 0 :(得分：2)

您需要使用position：fixed将页脚放在页面底部。

#footerwrap {
    width: 1000px;
    margin: 0 auto;
    position: fixed;
    bottom:0;
}

至于文本转换slideToggle似乎正在改变测试列表项的填充。通过在样式本身中设置填充，它可以解决问题。

    <li ><a style="padding:0 38%">test</a>

答案 1 :(得分：1)

这是一个解决导航问题的工作代码段。我在CSS中添加了注释，以便您可以更好地了解我所做的更改。我使用了一些flex-box来解决这个问题。超级简单。至于页脚，有很多方法可以实现这一点，所以我会发一个文章的链接，向你展示5种不同的方法，你可以选择最适合你的用例。希望这会有所帮助：）

P.S。作为旁注，我注意到你的标记中有一个叫做子菜单的类，它没有在你的CSS中使用。只是想到我指出它并不是什么大不了的事。你以后可能有计划。

Here are some footer options

＆＃13;
＆＃13; 
CREATE TRIGGER AirportCodeDegis
    ON AIRPORT
    INSTEAD OF UPDATE
AS
BEGIN
    SET NOCOUNT ON;
    DECLARE @Silinen_AirportCode nvarchar(10) = (SELECT deleted.Airport_code FROM deleted);
    DECLARE @Yeni_AirportCode nvarchar(10) = (SELECT inserted.Airport_code FROM inserted);

    -- Airport Tablosunda güncellenen Airport_code değerini, CAN_LAND tablosunun içindeki airport_code değerine atamaktadır..
    IF (SELECT COUNT(*) FROM CAN_LAND WHERE CAN_LAND.Airport_code = @Silinen_AirportCode) != 0
        BEGIN 
            UPDATE CAN_LAND SET Airport_code = @Yeni_AirportCode WHERE Airport_code = @Silinen_AirportCode; 
        END

    -- Airport Tablosunda güncellenen airport_code değerini, FLIGHT_LEG tablosunun içindeki Arrival_airport_code değerine atamaktadır..
    IF (SELECT COUNT(*) FROM FLIGHT_LEG WHERE FLIGHT_LEG.Arrival_airport_code = @Silinen_AirportCode) != 0
        BEGIN 
            UPDATE FLIGHT_LEG SET Arrival_airport_code = @Yeni_AirportCode WHERE Arrival_airport_code = @Silinen_AirportCode; 
        END

    -- Airport Tablosunda güncellenen airport_code değerini, FLIGHT_LEG tablosunun içindeki Departure_airport_code değerine atamaktadır..
    IF (SELECT COUNT(*) FROM FLIGHT_LEG WHERE Departure_airport_code = @Silinen_AirportCode) != 0
        BEGIN
            UPDATE FLIGHT_LEG SET Departure_airport_code = @Yeni_AirportCode WHERE Departure_airport_code = @Silinen_AirportCode; 
        END

    -- Airport Tablosunda güncellenen airport_code değerini, LEG_INSTANCE tablosunun içindeki Arrival_airport_code değerine atamaktadır..
    IF (SELECT COUNT(*) FROM LEG_INSTANCE WHERE LEG_INSTANCE.Arrival_airport_code = @Silinen_AirportCode) != 0
        BEGIN 
            UPDATE LEG_INSTANCE SET Arrival_airport_code = @Yeni_AirportCode WHERE Arrival_airport_code = @Silinen_AirportCode; 
        END

    -- Airport Tablosunda güncellenen airport_code değerini, LEG_INSTANCE tablosunun içindeki Departure_airport_code değerine atamaktadır..
    IF (SELECT COUNT(*) FROM LEG_INSTANCE WHERE LEG_INSTANCE.Departure_airport_code = @Silinen_AirportCode) != 0
        BEGIN 
            UPDATE LEG_INSTANCE SET Departure_airport_code = @Yeni_AirportCode WHERE Departure_airport_code = @Silinen_AirportCode; 
        END

    SET NOCOUNT OFF;
END;
＆＃13; 
$(document).ready(function() {
  $('li').hover(function() {
    $(this).find('ul>li').stop().slideToggle(250);
  });
});
＆＃13; 
body {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 18px;
  color: #333;
}

p {
  padding: 10px;
}


/* removed display property as it was not needed
   display inline-block was causing the nav item to shift over*/

#navigation ul {
  margin: 0;
  padding: 0;
  width: auto;
  list-style-type: none;
}

#navigation {
  text-align: center;
}

#navigation ul li {
  float: left;
  font-weight: bold;
  font-size: 20px;
  line-height: 40px;
  text-align: center;
  text-shadow: 1px 1px 1px #000;
  width: 140px;
}

#navigation ul li:hover {
  background: #9D9FA4;
  border-radius: 10px;
}

ul li a {
  text-decoration: none;
  color: #FFFFFF;
}

ul li li {
  background: #3F61A9;
  color: #fff;
  display: none;
}

ul li li:hover {
  background: #9D9FA4;
}

ul li li a {
  text-decoration: none;
  color: #fff;
}

#wrapper {
  margin: 0 auto;
  width: 1000px;
}

#headerwrap {
  width: 1000px;
  float: left;
  margin: 0 auto;
  position: relative;
}

#header {
  height: 125px;
  background: #000000;
  border-radius: 10px;
  border: 1px solid #000000;
  margin: 5px;
  position: relative;
}

#navigationwrap {
  width: 1000px;
  float: left;
  margin: 0 auto;
  position: relative;
}


/* Added display flex to container with 
   justify-content center to keep nav items aligned*/

#navigation {
  height: 40px;
  background: #52bf6e;
  border-radius: 10px;
  border: 1px solid #3ea858;
  margin: 5px;
  display: flex;
  justify-content: center
}

#contentwrap {
  width: 700px;
  float: left;
  margin: 0 auto;
}

#content {
  background: #FFFFFF;
  border-radius: 10px;
  margin: 5px;
}

#leftcolumnwrap {
  width: 150px;
  float: left;
  margin: 0 auto;
}

#leftcolumn {
  border-radius: 10px;
  margin: 5px;
}

#rightcolumnwrap {
  width: 150px;
  float: left;
  margin: 0 auto;
}

#rightcolumn {
  border-radius: 10px;
  margin: 5px;
}

#footerwrap {
  width: 1000px;
  float: left;
  margin: 0 auto;
  clear: both;
}

#footer {
  height: 40px;
  background: #9D9FA4;
  border-radius: 10px;
  border: 1px solid #888a91;
  margin: 5px;
  background-color: #9D9FA4;
  text-align: center;
  color: #FFFFFF;
  font-weight: bold;
}

#navigationwrap_placeholder {
  display: none;
  height: 40px;
}
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题