Jump to content
  • 0

не работает меню

aleksej

Asked by aleksej,

 Share

Question

aleksej Explorer

aleksej

Posted
Posted

навожу курсор на меню, но ничего не происходит, хотя до того как вставил в код слайдер, все работало, с чем может быть связано? вот коды

HTML-

<body>

<div class="header">

</div>

<div style=" width:1260px; height:1700px; background: url(images/fon.jpg) ;"/>

<div class="main">

<div class="content-main">

<ul class="menu">

<li><a href="#">Главная</a></li>

<li><a href="#">История</a></li>

<li><a href="#">Команды</a>

<ul>

<li><a href="#">CS:GO</a></li>

<li><a href="#">DOTA 2</a></li>

<li><a href="#">ST 2</a></li>

<li><a href="#">WoT</a></li>

</ul>

</li>

<li><a href="#">Партнеры</a></li>

<li><a href="#">Форум</a></li>

<li><a href="#">О нас</a></li>

</ul>

</div>

</div>

<div class="slider">

<input type="radio" name="slide_switch" id="id1"/>

<label for="id1">

<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>

</label>

<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg"/>

<!--Lets show the second image by default on page load-->

<input type="radio" name="slide_switch" id="id2" checked="checked"/>

<label for="id2">

<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>

</label>

<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg"/>

<input type="radio" name="slide_switch" id="id3"/>

<label for="id3">

<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>

</label>

<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg"/>

<input type="radio" name="slide_switch" id="id4"/>

<label for="id4">

<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>

</label>

<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg"/>

<input type="radio" name="slide_switch" id="id5"/>

<label for="id5">

<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100"/>

</label>

<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"/>

</div>

<div class="content">

<ul class="rubrik">

<li><a href="#"></a></li>

</ul>

<ul class="rubrik1">

<li><a href="#"></a></li>

</ul>

<ul class="rubrik2">

<li><a href="#"></a></li>

</ul>

<ul class="rubrik3">

<li><a href="#"></a></li>

</ul>

<ul class="rubrik4">

<li><a href="#"></a></li>

</ul>

<div class="post-main">

<h1><a href="#">Title </a><span> 13.03.2013</span></h1>

<div class="post">

<p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>

<p><a href="#">Read next</a></p>

</div>

</div>

</div>

<div class="login">

</div>

</div>

</body>

CSS-

*{

padding:0; margin:0;

}

body{

background: url(images/fon.jpg);

width: 1260px;

width: 100%;

}

.header{

background: url(images/head.jpg) center no-repeat;

width: 1260px;

height: 250px;

padding: 0px 0px 0px 1px;

}

.main{

width:970px; margin:0 auto;

}

.menu{

width: 900px;

margin: -95px 200px 0px 60px;

position: relative;

}

.menu li{

list-style: none;

float: left;

width: 140px;

position: relative;

}

.menu li a{

text-decoration: none;

font: 24px "Arial"; color:#FFFFFF;

background: #000;

display:block;

margin: 3px;

padding: 10px;

text-align: center;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

-border-radius: 5px;

}

.menu li a:hover{

background: #ccc;

color: #444;

}

.menu li ul{

float: none;

display: none;

position: absolut;

}

.menu li ul a{

text-decoration: none;

font: 24px "Arial"; color:#FFFFFF;

background: #000;

display:block;

margin: 3px;

padding: 10px;

text-align: center;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

-border-radius: 5px;

}

.menu li ul a:hover{

background: #ccc;

color: #444;

}

.menu li:hover ul {

display: block;

position: absolute;

top: 100%;

list-style: none;

margin: 0;

padding: 0;

}

.content{

background: url(images/glblock.png) center no-repeat;

width: 680px;

height: 1100px;

padding: 140px 340px 0px 230px;

}

.rubrik{

text-decoration: none;

list-style: none;

width: 108px;

height: 37px;

margin: -50px 0px 00px 70px;

}

.rubrik li a{

display: block;

background: url(images/wse.png);

text-decoration: none;

list-style: none;

width: 108px;

height: 37px;

}

.rubrik1{

text-decoration: none;

list-style: none;

width: 108px;

height: 37px;

margin: -37px 0px 0px 175px;

}

.rubrik1 li a{

display: block;

background: url(images/csgo.png);

text-decoration: none;

list-style: none;

width: 108px;

height: 37px;

}

.rubrik2{

text-decoration: none;

list-style: none;

width: 108px;

height: 37px;

margin: -37px 0px 00px 280px;

}

.rubrik2 li a{

display: block;

background: url(images/dota2.png);

text-decoration: none;

list-style: none;

width: 108px;

height: 37px;

}

.rubrik3{

text-decoration: none;

list-style: none;

width: 108px;

height: 37px;

margin: -37px 0px 0px 385px;

}

.rubrik3 li a{

display: block;

background: url(images/wot.png);

text-decoration: none;

list-style: none;

width: 108px;

height: 37px;

}

.rubrik4{

text-decoration: none;

list-style: none;

width: 108px;

height: 37px;

margin: -37px 0px 00px 490px;

}

.rubrik4 li a{

display: block;

background: url(images/sc2.png);

text-decoration: none;

list-style: none;

width: 108px;

height: 37px;

}

.post-main{

width:680px;

height:210px;

padding: 20px 0px 0px 70px;

}

.post-main h1{

width:680px;

font:16px Garamond;

color:#000;

}

.post-main h1 a{

font:normal 36px Garamond;

color:#000;

text-decoration: none;

}

.post-main h1 a:hover{

font:normal 36px Garamond;

color:#000;

text-decoration: underline;

}

.post-main h1 span{

font:normal 17px Garamond;

color:#000;

}

.post{

font:normal 17px Garamond;

color:#000;

width:650px;

}

.post p{

width:650px;

}

.post p a{

font:normal 14px Garamond;

color: #000;

padding: 0px 0px 0px 550px;

text-decoration: underline;

}

.post p a:hover{

text-decoration: none;

}

.login{

background: url(images/profile.png) no-repeat;

width: 242px;

height: 155px;

margin: -1150px 0px 0px 1000px;

}

.slider{

position: relative;

padding-top: 420px;

padding-left: 300px;

margin: 100px auto;

}

.slider>img{

position: absolute;

top: 100px;

left: 300px;

margin-bottom: 600px;

transition: all 0.5s;

}

.slider input[name=slide_switch] {

display: none;

}

.slider label {

margin: 18px 0 0 18px;

border: 3px solid #999;

float: left;

cursor: pointer;

transition: all 0.5s;

opacity: 0.6;

}

.slider label img{

display: block;

}

.slider input[name=slide_switch]:checked+label {

border-color: #666;

opacity: 1;

}

.slider input[name=slide_switch] ~ img {

opacity: 0;

transform: scale(1.1);

}

.slider input[name=slide_switch]:checked+label+img {

opacity: 1;

transform: scale(1);

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0
deadrash Explorer

deadrash

Posted
Posted

можете объяснить, что это )) я новичек в этом...

На любом из этих сайтов можно сделать рабочий вариант вашего кода.

Например http://jsfiddle.net/YVqhW/

Накидайте свой код туда, и выкладывайте, иначе просто сложно читать ваш код.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept