过渡宽度不起作用？

Question

我有这个HTML：

＆＃13;

＆＃13;

var should = require('should');
var socket = require('socket.io-client')('http://localhost:3000');


describe("echo", function () {
    var server,
        options ={
            transports: ['websocket'],
            'force new connection': true
        };

    it("echos message", function (done) {
        var client = socket.connect("http://localhost:3000", options);

        client.once("connect", function () {
            client.once("echo", function (message) {
                message.should.equal("Hello World");

                client.disconnect();
                done();
            });

            client.emit("echo", "Hello World");
        });
        done();
    });
});

describe("On Connect Things Should Happen", function() {

    it('initial connection events', function() {

        should.exist(socket); 
        socket.open();      
        socket.compress(false).emit('an event', { some: 'data' });

        socket.on('error', function() {
            console.log('error'); 
        }); 

        socket.connect(); 
        socket.on('disconnect', function(connection) {
            console.log('disconnected'); 
            console.log("i'm here");
        });



        socket.on('connect', function(connection) {
            console.log('connected'); 
        });
    });
});

＆＃13;

.orderData_button {
  background-color: #FF5733;
  border: none;
  color: white;
  padding: 5px 60px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  transition: width 1s ease-in-out
}
.slideDown_orderData {
  display: none;
  position: relative;
  z-index: 3;
  transition: width 1s ease-in-out
}
.orderData_button:hover .slideDown_orderData {
  display: block;
  width: 100%;
}
.orderData_button:hover {
  width: 50%;
}
#orderData_2 {
  font-size: 20px;
  text-align: center;
}

＆＃13;

＆＃13;

＆＃13;

我的<div class="orderData_button"> <p>Your Orders</p> <p></p> <div class="slideDown_orderData"> <p id="orderData_2"></p> </div> </div>和orderData_button不会转换宽度，但会立即更改。为什么是这样？ （是的，我已经遍布谷歌，没有成功）

-CSS noob